<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <!-- 搜索框 -->
                <vxe-input size="small" style="width:80%;" clearable placeholder="默认尺寸">
                    <template #prefix>
                    <i class="fa fa-search" style="color: green;"></i>
                    </template>
                </vxe-input>
            </el-col>
            <el-col :span="2" >
                <!-- 搜索按钮 -->
                <vxe-button style="height:35px;width:100%;" 
                    status="primary" icon="fa fa-search" size="medium" 
                    @click="changeLoading()">搜索</vxe-button>
            </el-col>
            <el-col :span="3" >
                <!-- 高级搜索按钮 -->
                <el-button type="primary" size="medium" @click="showAdvanceSearch = !showAdvanceSearch">
                    <i :class="showAdvanceSearch ? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'"
                        style="margin-right: 5px" aria-hidden="true"></i>高级搜索</el-button>
            </el-col>
        </el-row>
        <!-- 高级搜索下拉框内容 -->
        <el-collapse-transition>
            <div v-show="showAdvanceSearch" class="searchStyle">
                <el-row :gutter="20" style="margin-top:5px;margin:10px 0">
                    <el-col :span="6">
                        <!-- 搜索框 -->
                        <vxe-input size="small" style="width:80%;" clearable placeholder="默认尺寸">
                            <template #prefix>
                            <i class="fa fa-search" style="color: green;"></i>
                            </template>
                        </vxe-input>
                    </el-col>
                    <el-col :span="6">
                        职位:
                        <el-select v-model="empSearch.posId" size="small" style="width: 200px" placeholder="职位">
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        职称:
                        <el-select v-model="empSearch.jobLevelId" size="small" style="width: 200px" placeholder="职称">
                            <el-option
                                    v-for="item in jobLevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        聘用形式:
                        <el-radio-group v-model="empSearch.engageForm">
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <!-- 高级搜索第二行 -->
                <el-row :gutter="20" style="margin:10px 0">
                    <el-col :span="6" style="display: flex;">
                        所属部门:
                        <el-popover
                                placement="bottom"
                                title="请选择部门"
                                width="260"
                                trigger="manual"
                                v-model="visible2">
                            <el-tree :data="allDeps"
                                     :props="defaultProps"
                                     default-expand-all
                                     @node-click="handleNodeClick2"></el-tree>
                            <div slot="reference" class="deptSearch" @click="showDeptView">{{deptName}}</div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期:
                        <el-date-picker
                                v-model="empSearch.beginDateScope"
                                type="daterange"
                                unlink-panels
                                value-format="yyyy-MM-dd"
                                size="medium"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </div>
        </el-collapse-transition>
        <!-- 表格展示 -->
        <vxe-table
            border
            highlight-hover-row
            :loading="loading"
            :data="tableData"
            class="table-container">
            <vxe-column type="seq" title="Number" width="80"></vxe-column>
            <vxe-column field="name" title="Name"></vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
            <vxe-column field="address" title="Address"></vxe-column>
        </vxe-table>
        <!-- 分页 -->
        <vxe-pager
            background
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :total="total"
            @page-change="handlePageChange"
            :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
        </vxe-pager>
    </div>
</template>

<script>
    export default {
        name: "PerEmp",
        data () {
            return {
                loading: false,
                jobLevels:[],
                politicsStatus:[],
                positions:[],
                empData: [],
                deptName: '',
                allDeps: [],
                showAdvanceSearch: false,
                tableData: [],
                visible2: false,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                empName: '',
                tiptopDegrees:['博士','硕士','本科','大专','高中','初中','小学','其他'],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                empSearch: {
                    nationId: null,
                    politicId: null,
                    departmentId: null,
                    posId: null,
                    jobLevelId: null,
                    engageForm: "",
                    beginDateScope: null
                },
            }
        },
        mounted() {
            this.initEmpData()
            this.initSelectData()
            this.initPositions()
        },
        methods: {
            changeLoading(){
                this.loading = true
            },
            initPositions(){
                this.getRequest('/employee/basic/postions').then(res =>{
                    if (res){
                       this.positions = res
                    }
                })
            },
            showDeptView(){
                this.visible2 = !this.visible2
            },
            initPositions(){
                this.getRequest('/employee/basic/postions').then(res =>{
                    if (res){
                       this.positions = res
                    }
                })
            },
            initSelectData(){
                let nation = window.sessionStorage.getItem('nations')
                let jobLevel = window.sessionStorage.getItem('jobLevels')
                let politicsStatus = window.sessionStorage.getItem('politicsStatus')
                let allDept = window.sessionStorage.getItem('allDeps')
                if (!allDept){
                    this.getRequest('/employee/basic/deps').then(res =>{
                        if (res){
                            this.allDeps = res;
                            window.sessionStorage.setItem('allDeps',JSON.stringify(res))
                        }
                    })
                }else {
                    this.allDeps = JSON.parse(allDept)
                }
                if (!politicsStatus){
                    this.getRequest('/employee/basic/politicsstatus/').then(res =>{
                        if (res){
                            this.politicsStatus = res;
                            window.sessionStorage.setItem('politicsStatus',JSON.stringify(res))
                        }
                    })
                }else {
                    this.politicsStatus = JSON.parse(politicsStatus)
                }
                if (!jobLevel){
                    this.getRequest('/employee/basic/joblevels').then(res =>{
                        if (res){
                            this.jobLevels = res;
                            window.sessionStorage.setItem('jobLevels',JSON.stringify(res))
                        }
                    })
                }else {
                    this.jobLevels = JSON.parse(jobLevel)
                }
                if (!nation){
                    this.getRequest('/employee/basic/nations').then(res =>{
                        if (res){
                            this.nations = res;
                            window.sessionStorage.setItem('nations',JSON.stringify(res))
                        }
                    })
                }else {
                    this.nations = JSON.parse(nation)
                }
            },
            handleNodeClick2(data){
                this.empSearch.departmentId = data.id
                this.deptName = data.name
                this.visible2 = !this.visible2
            },
            handlePageChange({ currentPage, pageSize }) {
                this.currentPage = currentPage
                this.pageSize = pageSize
                this.initEmpData()
            },
            initEmpData(type) {
                let url = '/employee/basic/?currentPage=' + this.currentPage + '&size=' + this.pageSize
                if (type && type === 'advance'){
                    if (this.empSearch.politicId){
                        url += '&politicId=' + this.empSearch.politicId
                    }
                    if (this.empSearch.nationId){
                        url += '&nationId=' + this.empSearch.nationId
                    }
                    if (this.empSearch.posId){
                        url += '&posId=' + this.empSearch.posId
                    }
                    if (this.empSearch.jobLevelId){
                        url += '&jobLevelId=' + this.empSearch.jobLevelId
                    }
                    if (this.empSearch.engageForm){
                        url += '&engageForm=' + this.empSearch.engageForm
                    }
                    if (this.empSearch.departmentId){
                        url += '&departmentId=' + this.empSearch.departmentId
                    }
                    if (this.empSearch.beginDateScope){
                        url += '&beginDateScope=' + this.empSearch.beginDateScope
                    }
                }else {
                    url += '&name=' + this.empName
                }
                this.getRequest(url).then(res => {
                    this.loading = true
                    if (res) {
                        if(res.data.total === 0 ){
                            this.$message.error('错了哦，没有查询结果！');
                        }
                        this.loading = false
                        this.empData = res.data.employees
                        this.total = res.data.total
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .table-container{
        margin-top: 10px;
    }
    .searchStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px;
        padding: 5px;
    }
    .deptSearch{
        width: 160px;
        height: 32px;
        font-size: 13px;
        margin-left: 5px;
        display: inline-flex;
        border: 1px solid #dedede;
        border-radius: 5px;
        box-sizing: border-box;
        padding-left: 15px;
        cursor: pointer;
        align-items: center;
    }
</style>
